<template>
  <div class="content-div">
    <div class="gn-box">
      <div @click="toPage(item.router)" :style="{ 'borderBottom' : index < 6 ? '1px solid #E8E8E8' : '0px' }" class="gn-item" v-for="(item, index) in gnList" :key="index">
        <div class="gn-item-title">
          <span>{{item.name}}</span>
        </div>
        <div class="gn-item-text"><span>{{item.value}}</span></div>
      </div>
      <div @click="toPage(item.router)" class="gn-item">
        <div class="gn-item-title" style="font-weight:700;font-size:14px;">
          <span>证件照：</span>
        </div>
      </div>
      <div class="card-img flex row-center">
        <van-uploader v-model="fileList" :deletable="false" :show-upload="false" />
        <!-- <van-uploader v-model="fileList" show-upload="false">
          <template #preview-cover="{ file }">
            <div class="preview-cover van-ellipsis">{{ file.name }}</div>
          </template>
        </van-uploader> -->
      </div>
    </div>
  </div>
</template>
<script>
import { getQualification } from '@/api/medicalWaiter.js'
import { Toast } from 'vant'
export default {
  name: 'identification',
  data () {
    return {
      userInfo: {},
      gnList: [
        { name: '姓名', img: require('@/assets/images/提现明细.png'), router: '/addressList', value: '' },
        { name: '身份证号', img: require('@/assets/images/我的消息.png'), router: '/aboutUs', value: '' },
        { name: '手机号码', img: require('@/assets/images/我的地址.png'), router: '/policyIn?pageType=1', value: '' },
        { name: '护龄', img: require('@/assets/images/接单助手.png'), router: '/policyIn?pageType=2', value: '' },
        // { name: '个人简介', img: require('@/assets/images/关于我们.png'), router: '/setting', value: '' }
      ],
      qualificationInfo: {},
      accompanying_physician_id: this.$store.state.user.severUserInfo.accompanying_physician_id,
      fileList: []
    }
  },
  methods: {
    getQualificationInfo () {
      getQualification({ accompanying_physician_id: this.accompanying_physician_id }).then(res => {
        if (res.data.errcode === 0) {
          this.qualificationInfo = res.data.data
          this.gnList[0].value = this.qualificationInfo.name
          this.gnList[1].value = this.qualificationInfo.card_no
          this.gnList[2].value = this.qualificationInfo.tel
          this.gnList[3].value = this.qualificationInfo.nurse_age
          this.fileList.push({ url: this.qualificationInfo.front_card }, { url: this.qualificationInfo.opposite_card })
          return
        }
        Toast.fail(res.data.errmsg)
      })
    }
  },
  mounted () {
    this.getQualificationInfo()
  }
}
</script>
<style scoped lang="less">
  .content-div {
    background-color: #f2f3f7;
    padding: 10px;
    height: auto;
    min-height: 100%;
    .gn-box{
      box-sizing: border-box;
      padding: 10px;
      background-color: #fff;
      border-radius: 10px;
      .gn-item{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        box-sizing: border-box;
        padding: 10px 4px;
        img{
          width: 20px;
          height: 20px;
          margin-right: 6px;
        }
        .gn-item-title {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          font-size: 12px;
          width: 30%;
          color: #666666;
        }
        .gn-item-text {
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          align-items: center;
          font-size: 12px;
          width: 70%;
        }
        /deep/ .van-cell {
          font-size: 12px;
          padding: 0px;
        }
        /deep/ .van-field__control {
          text-align: right;
        }
      }
      .card-img {
        height: auto;
        /deep/ .van-uploader__preview-image {
          width: 7rem;
        }
      }
    }
    .row-around {
      justify-content: space-around;
    }
    .flex {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .row-center {
      justify-content: center;
    }
    .preview-cover {
      position: absolute;
      bottom: 0;
      box-sizing: border-box;
      width: 100%;
      padding: 4px;
      color: #fff;
      font-size: 12px;
      text-align: center;
      background: rgba(0, 0, 0, 0.3);
    }
  }
</style>
